import { useIntl } from '@umijs/max';
import { FC } from 'react';
import Style from './index.less';

interface InfoFieldProps {
  max: number | undefined;
  maxLocation: string | undefined;
  min?: string | number | null;
  minLocation?: string;
  imgsrc?: string;
  category?: string;
  maxDeviceCode?: string;
  minDeviceCode?: string;
}

interface Ipros {
  EtremeData: InfoFieldProps;
}

import { useUpdateNOdeSelect } from '../../SelectedDeviceNodeContext';

export const EtremeInfoField: FC<Ipros> = ({ EtremeData }) => {
  const updataTreeSelect = useUpdateNOdeSelect();
  const intl = useIntl();
  const {
    max,
    maxLocation,
    min,
    minLocation,
    imgsrc = '',
    category = 'tempt',
    maxDeviceCode = '',
    minDeviceCode = '',
  } = EtremeData;
  const mapObject: { [key: string]: { maxTitle: string; minTitle: string; unit: string } } = {
    tempt: {
      maxTitle: intl.formatMessage({ id: 'stationRealtimeMonitoring.tmaxTool' }),
      minTitle: intl.formatMessage({ id: 'stationRealtimeMonitoring.tminTool' }),
      unit: '℃',
    },
    soc: {
      maxTitle: intl.formatMessage({ id: 'stationRealtimeMonitoring.HighestSOC' }),
      minTitle: intl.formatMessage({ id: 'stationRealtimeMonitoring.LowestSOC' }),
      unit: '%',
    },
    vol: {
      maxTitle: intl.formatMessage({ id: 'stationRealtimeMonitoring.vmaxTool' }),
      minTitle: intl.formatMessage({ id: 'stationRealtimeMonitoring.vminTool' }),
      unit: 'V',
    },
    current: {
      maxTitle: intl.formatMessage({ id: 'stationRealtimeMonitoring.MaxCurrent' }),
      minTitle: intl.formatMessage({ id: 'stationRealtimeMonitoring.MinCurrent' }),
      unit: 'A',
    },
  };

  const maxTitle = mapObject[category]['maxTitle'];
  const minTitle = mapObject[category]['minTitle'];
  const unit = mapObject[category]['unit'];

  const goTreeNode = (deviceCode: string) => {
    updataTreeSelect(deviceCode);
  };

  return (
    <div className={Style['extreme']}>
      <div className={Style['extreme-item']}>
        <div className={Style['extreme-item-left']}>{imgsrc ? <img src={imgsrc} /> : null}</div>
        <ul className={Style['extreme-item-right']}>
          <li>
            <p className={Style['extreme-item-right-toptitle']}>
              {maxTitle} {max || max === 0 ? `${max}${unit}` : null}
            </p>
            <a
              className={Style['extreme-item-right-pointtitle']}
              onClick={() => goTreeNode(maxDeviceCode)}
            >
              {maxLocation ? maxLocation : '--'}
            </a>
          </li>
          <li>
            <p className={Style['extreme-item-right-toptitle']}>
              {minTitle} {min || min === 0 ? `${min}${unit}` : null}
            </p>
            <a
              className={Style['extreme-item-right-pointtitle']}
              onClick={() => goTreeNode(minDeviceCode)}
            >
              {minLocation ? minLocation : '--'}
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
};
